<template>
    <div class='box'>
        <div class="item" :class="store._state.data.active==index?'select':''" v-for="(item,index) in list" :key="index" @click="Go(index)">
            <van-icon v-if="item.href=='/cart'"  :badge="store.state.cart.length"  :name="item.icon" />
            <van-icon :name="item.icon" v-else />
            <span>{{item.title}}</span> 
        </div> 
    </div>
</template>

<script>
import { Toast } from "vant";
import { useStore } from "vuex";
import { ref, reactive, toRefs, onMounted } from "vue";
export default {
  props: ["tabList"],
  setup(props, { emit }) {
    const Local = ref("");
    const list = reactive(props.tabList);
    // 获取vuex
    const store = useStore();
    const act = ref(store._state.data.active);
    const Go = index => {
      let href = list[index].href
      let arr = ["/home", "/cate", "/search", "/goodsList"];
      let ind = arr.indexOf(href);
      // 判断跳转的是否为购物车等需要登录的页面
      if (ind == -1) {
        if (!localStorage.getItem("token")) {
          store.commit("setTab", { act: -1, isShow: false });
          Toast.fail("未登录");
          location.href = "/#/login";
          return false;
        }
      }
      store.commit("setTab", { act: index, isShow: true });
      location.href = "/#" + href;
    };
    onMounted(() => {
      Local.value = localStorage.getItem("token") || "";
    });
    return {
      Go,
      list,
      store,
      act,
      Local
    };
  }
};
</script>

<style scoped lang='scss'>
.box {
  width: 100%;
  height: 110px;
  padding: 10px 0;
  display: flex;
  align-items: center;
  justify-content: space-around;
  border-top: 1px solid #ddd;
  background: #fff;
  position: fixed;
  bottom: 0;
  .item {
    height: 90px;
    font-size: 45px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    span {
      font-size: 30px;
    }
  }
  .select {
    color: #1baeae;
  }
}
</style>
